<template>
<div style="margin-top: 10px;" class="mod-product">
    <el-menu :default-active="active" mode="horizontal" @select="setNav" text-color="#333">
        <el-menu-item index="1">产品介绍</el-menu-item>
        <el-menu-item index="2">行程描述</el-menu-item>
        <el-menu-item index="3">费用说明</el-menu-item>
        <el-menu-item index="4">注意事项</el-menu-item>
    </el-menu>
    <template v-if="active == '1'">
        <div class="panel">
            <div class="bd">
                <div style="height: 32px; line-height: 32px;">
                    <span style="color: #f00; font-size: 18px; margin-right: 4px;">*</span>图文详情
                </div>
                <tinymce-editor v-model="form.description" ref="editor"></tinymce-editor>
            </div>
        </div>
    </template>
    <template v-if="active == '2'">
        <div class="panel">
            <div class="hd">行程描述</div>
            <div class="bd">
                <el-form label-width="90px" size="small">
                    <el-form-item label="路线名称：">
                        <el-input style="width: 540px; padding-right: 60px" v-model.trim="route.name" placeholder="未设置线路名称" maxlength="30" show-word-limit></el-input>
                        <!--                        <el-input style="width: 480px;" v-model="route.name" placeholder="未设置线路名称" maxlength="30" show-word-limit></el-input>-->
                    </el-form-item>
                    <el-form-item label="行程天数：">
                        <el-input-number controls-position="right" v-model="route.days" @change="setDays" :min="0"></el-input-number>
                    </el-form-item>
                </el-form>
            </div>
            <template v-for="(day, idx) in schedule">
                <div class="hd step-hd">第{{getDayText(idx+1)}}天</div>
                <div class="bd">
                    <div class="step">
                        <div class="row" v-if="!day.gather.length">
                            <div class="tit">集合设置：</div>
                            <div class="line">
                                <span class="circle o"></span>
                                <span class="circle btn" @click="addSchedule(idx, 'gather', 0)">+</span>
                            </div>
                        </div>
                        <div class="row" v-for="(item, i) in day.gather">
                            <div class="tit" v-if="i == 0">集合设置：</div>
                            <div class="tit" v-else></div>
                            <div class="line">
                                <span class="circle o"></span>
                                <!--<span class="circle btn" @click="addSchedule(idx, item.category, i)">+</span>-->
                            </div>
                            <div class="cont" v-if="day.gather.length">
                                <div class="fm-box">
                                    <div class="title">
                                        <div class="t">{{item.name}}</div>
                                        <div class="btn">
                                            <el-button type="text" @click="delSchedule(idx, item.category, i)">删除</el-button>
                                        </div>
                                    </div>
                                    <div class="form">
                                        <el-form label-width="120px" size="small">
                                            <el-form-item :label="'集合地址'" v-if="!item.form.address||!item.form.address.length">
                                                <el-input style="width: 540px; padding-right: 60px" v-model.trim="item.form.address[0]" placeholder="" maxlength="200" show-word-limit></el-input>
                                                <template>
                                                    <el-button type="text" @click="item.form.address.splice(0, 1)">删除</el-button>
                                                </template>
                                            </el-form-item>
                                            <el-form-item :label="'集合地址'+(inIdx+1)+'：'" v-for="(inItem, inIdx) in item.form.address" :key="inIdx">
                                                <el-input style="width: 540px; padding-right: 60px" v-model.trim="item.form.address[inIdx]" placeholder="" maxlength="200" show-word-limit></el-input>
                                                <template v-if="inIdx != 0">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                    <el-button type="text" @click="item.form.address.splice(inIdx, 1)">删除</el-button>
                                                </template>
                                            </el-form-item>
                                            <div class="add-btn">
                                                <el-button icon="el-icon-plus" @click="item.form.address.push('')" type="text">添加集合地址</el-button>
                                            </div>
                                            <el-form-item label="详细说明：">
                                                <el-input type="textarea" rows="4" style="width: 560px; padding-right: 80px" v-model.trim="item.form.intro" placeholder="请输入补充信息" maxlength="10000" show-word-limit></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" v-if="!day.list.length">
                            <div class="tit">行程设置：</div>
                            <div class="line">
                                <span class="circle o"></span>
                                <el-popover placement="right" width="90" trigger="click">
                                    <div class="popover-stype">
                                        <div class="item" @click="addSchedule(idx, 'traffic', 0)">交通</div>
                                        <div class="item" @click="addSchedule(idx, 'play', 0)">游玩活动</div>
                                        <div class="item" @click="addSchedule(idx, 'catering', 0)">餐饮</div>
                                        <div class="item" @click="addSchedule(idx, 'shoping', 0)">购物</div>
                                        <div class="item" @click="addSchedule(idx, 'hotel', 0)">酒店</div>
                                    </div>
                                    <span slot="reference" class="circle btn">+</span>
                                </el-popover>
                            </div>
                        </div>
                        <div class="row" v-for="(item, i) in day.list">
                            <div class="tit" v-if="i == 0">行程设置：</div>
                            <div class="tit" v-else></div>
                            <div class="line">
                                <span class="circle o"></span>
                                <el-popover placement="right" width="90" trigger="click">
                                    <div class="popover-stype">
                                        <div class="item" @click="addSchedule(idx, 'traffic', i)">交通</div>
                                        <div class="item" @click="addSchedule(idx, 'play', i)">游玩活动</div>
                                        <div class="item" @click="addSchedule(idx, 'catering', i)">餐饮</div>
                                        <div class="item" @click="addSchedule(idx, 'shoping', i)">购物</div>
                                        <div class="item" @click="addSchedule(idx, 'hotel', i)">酒店</div>
                                    </div>
                                    <span slot="reference" class="circle btn">+</span>
                                </el-popover>
                            </div>
                            <div class="cont">
                                <div class="fm-box">
                                    <div class="title">
                                        <div class="t">{{{"traffic":'交通',"play":'游玩',catering:'餐饮',shoping:'购物',hotel:'酒店'}[item.category]}}</div>
                                        <div class="btn">
                                            <el-button type="text" v-if="day.list.length > 1" @click="delSchedule(idx, item.category, i)">删除</el-button>
                                        </div>
                                    </div>
                                    <div class="form" v-if="item.category == 'traffic'">
                                        <el-form label-width="120px" size="small">
                                            <el-form-item label="交通方式：">
                                                乘
                                                <el-select v-model="item.form.type" style="width: 120px; margin-right: 10px;" placeholder="请选择">
                                                    <el-option value="巴士"></el-option>
                                                    <el-option value="火车"></el-option>
                                                    <el-option value="飞机"></el-option>
                                                    <el-option value="自定义"></el-option>
                                                </el-select>
                                                <el-input v-show="item.form.type == '自定义'" style="width: 180px; margin-right: 10px;" v-model.trim="item.form.typeText" placeholder="" maxlength="20" show-word-limit></el-input>
                                                <el-select v-model="item.form.direction" style="width: 120px;" placeholder="请选择">
                                                    <el-option label="前往" value="go"></el-option>
                                                    <el-option label="返回" value="back"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="行驶时间：">
                                                <el-input style="width: 140px; margin-right: 10px;" v-model.trim="item.form.hour">
                                                    <template slot="append">小时</template>
                                                </el-input>
                                                <el-input-number style="width: 140px;" v-model="item.form.minute" :max="59">
                                                    <template slot="append">分钟</template>
                                                </el-input-number>分钟
                                            </el-form-item>
                                            <el-form-item label="详细说明：">
                                                <el-input type="textarea" rows="4" style="width: 560px; padding-right: 80px" v-model.trim="item.form.intro" placeholder="请输入补充信息" maxlength="10000" show-word-limit></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                    <div class="form" v-else-if="item.category == 'play'">
                                        <el-form label-width="120px" size="small">
                                            <el-form-item label="活动：">
                                                <div class="upload">
                                                    <div class="ipt">
                                                        <el-input style="width: 360px;" v-model.trim="item.form.name" placeholder="请输入活动"></el-input>
                                                    </div>
                                                    <div class="btn">
                                                        <el-upload :action="uploadApi" :disabled="item.form.pics.length==6" :headers="uploadHeaders" :before-upload="beforeAvatarUpload" :on-success="uploadPicSuccess(idx, i)" :show-file-list="false">
                                                            <el-button size="small" type="primary">添加图片</el-button>
                                                        </el-upload>
                                                    </div>
                                                </div>
                                                <div class="preview">
                                                    <div class="item" v-for="(it, idx) in item.form.pics">
                                                        <i class="el-icon-close" @click="item.form.pics.splice(idx, 1)"></i>
                                                        <img :src="it.url">
                                                    </div>
                                                </div>
                                            </el-form-item>
                                            <el-form-item label="活动时间：">
                                                <el-input style="width: 140px; margin-right: 10px;" v-model.trim="item.form.hour">
                                                    <template slot="append">小时</template>
                                                </el-input>
                                                <el-input-number style="width: 140px;" v-model="item.form.minute" :max="59">
                                                    <template slot="append">分钟</template>
                                                </el-input-number>分钟
                                            </el-form-item>
                                            <el-form-item label="详细说明：">
                                                <el-input type="textarea" rows="4" style="width: 560px; padding-right: 80px" v-model.trim="item.form.intro" placeholder="请输入补充信息" maxlength="10000" show-word-limit></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                    <div class="form" v-else-if="item.category == 'catering'">
                                        <el-form label-width="120px" size="small">
                                            <el-form-item label="餐饮选择：" v-show="item.form.backType == 'back'">
                                                <el-select v-model="item.form.type" style="width: 120px; margin-right: 10px;" placeholder="请选择">
                                                    <el-option label="早晨" value="breakfast"></el-option>
                                                    <el-option label="午餐" value="lunch"></el-option>
                                                    <el-option label="晚餐" value="supper"></el-option>
                                                    <el-option label="宵夜" value="midnight"></el-option>
                                                    <el-option label="下午茶" value="afternoon"></el-option>
                                                </el-select>
                                                <el-select v-model="item.form.isSelfCare" style="width: 120px;" placeholder="请选择">
                                                    <el-option label="自理" :value="1"></el-option>
                                                    <el-option label="非自理" :value="0"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="餐饮选择：">
                                                <el-input style="width: 540px; padding-right: 60px" v-model.trim="item.form.address" placeholder="请输入餐厅名称或用餐地点" maxlength="200" show-word-limit></el-input>
                                            </el-form-item>
                                            <el-form-item label="餐标：">
                                                <el-input style="width: 180px;" v-model.trim="item.form.benchmark" placeholder="" maxlength="200">
                                                    <template slot="append">元/人</template>
                                                </el-input>
                                            </el-form-item>
                                            <el-form-item label="活动时间：">
                                                <el-input style="width: 140px; margin-right: 10px;" v-model.trim="item.form.hour">
                                                    <template slot="append">小时</template>
                                                </el-input>
                                                <el-input-number style="width: 140px;" v-model="item.form.minute" :max="59">
                                                    <template slot="append">分钟</template>
                                                </el-input-number>分钟
                                            </el-form-item>
                                            <el-form-item label="详细说明：">
                                                <el-input type="textarea" rows="4" style="width: 560px; padding-right: 80px" v-model.trim="item.form.intro" placeholder="请输入补充信息" maxlength="10000" show-word-limit></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                    <div class="form" v-else-if="item.category == 'shoping'">
                                        <el-form label-width="120px" size="small">
                                            <el-form-item label="购物地点：">
                                                <el-input style="width: 540px; padding-right: 60px" v-model.trim="item.form.address" placeholder="" maxlength="200" show-word-limit></el-input>
                                            </el-form-item>
                                            <el-form-item label="可购商品：">
                                                <el-input style="width: 540px; padding-right: 60px" v-model.trim="item.form.goods" placeholder="" maxlength="200" show-word-limit></el-input>
                                                <div>
                                                    <el-checkbox v-model="item.form.isShowTip" :true-label="1" :false-label="0">购物自愿，请保留购物凭证（勾选则前端显示）</el-checkbox>
                                                </div>
                                            </el-form-item>
                                            <el-form-item label="购物时间：">
                                                <el-input style="width: 140px; margin-right: 10px;" v-model.trim="item.form.hour">
                                                    <template slot="append">小时</template>
                                                </el-input>
                                                <el-input-number style="width: 140px;" v-model="item.form.minute" :max="59">
                                                    <template slot="append">分钟</template>
                                                </el-input-number>分钟
                                            </el-form-item>
                                            <el-form-item label="详细说明：">
                                                <el-input type="textarea" rows="4" style="width: 560px; padding-right: 80px" v-model.trim="item.form.intro" placeholder="请输入补充信息" maxlength="10000" show-word-limit></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                    <div class="form" v-else-if="item.category == 'hotel'">
                                        <el-form label-width="120px" size="small">
                                            <el-form-item label="酒店地址：">
                                                <div class="upload">
                                                    <div class="ipt">
                                                        <el-input style="width: 420px;padding-right: 60px" v-model.trim="item.form.address" maxlength="200" show-word-limit></el-input>
                                                    </div>
                                                    <div class="btn">
                                                        <el-upload :action="uploadApi" :disabled="item.form.pics.length==6" :headers="uploadHeaders" :on-success="uploadPicSuccess(idx, i)" :show-file-list="false">
                                                            <el-button size="small" type="primary">添加图片</el-button>
                                                        </el-upload>
                                                    </div>
                                                </div>
                                                <div class="preview">
                                                    <div class="item" v-for="(it, idx) in item.form.pics">
                                                        <i class="el-icon-close" @click="item.form.pics.splice(idx, 1)"></i>
                                                        <img :src="it.url">
                                                    </div>
                                                </div>
                                            </el-form-item>
                                            <el-form-item label="酒店星级：">
                                                <el-select v-model="item.form.starLevel" style="width: 120px; margin-right: 10px;" placeholder="请选择">
                                                    <el-option value="五星级"></el-option>
                                                    <el-option value="四星级"></el-option>
                                                    <el-option value="三星级"></el-option>
                                                    <el-option value="二星级"></el-option>
                                                    <el-option value="一星级"></el-option>
                                                    <el-option value="自定义"></el-option>
                                                </el-select>
                                                <el-input v-show="item.form.starLevel == '自定义'" style="width: 180px;" v-model.trim="item.form.starLevelText" placeholder="" maxlength="20" show-word-limit></el-input>

                                            </el-form-item>
                                            <el-form-item label="酒店名称：">
                                                <el-input style="width: 560px; padding-right: 80px" v-model.trim="item.form.name" placeholder="" maxlength="200" show-word-limit></el-input>
                                            </el-form-item>
                                            <el-form-item label="详细说明：">
                                                <el-input type="textarea" rows="4" style="width: 560px; padding-right: 80px" v-model.trim="item.form.intro" placeholder="请输入补充信息" maxlength="10000" show-word-limit></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" v-if="!day.back.length">
                            <div class="tit">返程设置：</div>
                            <div class="line">
                                <span class="circle o"></span>
                                <span class="circle btn" @click="addSchedule(idx, 'back', i)">+</span>
                            </div>
                        </div>
                        <div class="row" v-for="(item, i) in day.back">
                            <div class="tit" v-if="i == 0">返程设置：</div>
                            <div class="tit" v-else></div>
                            <div class="line">
                                <span class="circle o"></span>
                            </div>
                            <div class="cont">
                                <div class="fm-box">
                                    <div class="title">
                                        <div class="t">返程</div>
                                        <div class="btn">
                                            <el-button type="text" @click="delSchedule(idx, item.category, i)">删除</el-button>
                                        </div>
                                    </div>
                                    <div class="form">
                                        <el-form label-width="120px" size="small">
                                            <el-form-item label="散团方式：">
                                                <el-radio-group v-model="item.form.backType">
                                                    <el-radio label="locally">就地散团</el-radio>
                                                    <el-radio label="back">返程散团</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item label="交通方式：" v-show="item.form.backType == 'back'">
                                                乘
                                                <el-select v-model="item.form.type" style="width: 120px; margin-right: 10px;" placeholder="请选择">
                                                    <el-option value="巴士"></el-option>
                                                    <el-option value="火车"></el-option>
                                                    <el-option value="飞机"></el-option>
                                                    <el-option value="自定义"></el-option>
                                                </el-select>
                                                <el-input v-show="item.form.type == '自定义'" style="width: 180px;" v-model.trim="item.form.typeText" placeholder="" maxlength="20" show-word-limit></el-input>
                                                返回
                                            </el-form-item>
                                            <el-form-item label="散团地点：">
                                                <el-input style="width: 560px; padding-right: 80px" v-model.trim="item.form.address" placeholder="" maxlength="200" show-word-limit></el-input>
                                            </el-form-item>
                                            <el-form-item label="占用时间：" v-show="item.form.backType == 'back'">
                                                <el-input style="width: 140px; margin-right: 10px;" v-model.trim="item.form.hour">
                                                    <template slot="append">小时</template>
                                                </el-input>
                                                <el-input-number style="width: 140px;" v-model="item.form.minute" :max="59">
                                                    <template slot="append">分钟</template>
                                                </el-input-number>分钟
                                            </el-form-item>
                                            <el-form-item label="详细说明：">
                                                <el-input type="textarea" rows="4" style="width: 560px; padding-right: 80px" v-model.trim="item.form.intro" placeholder="请输入补充信息" maxlength="10000" show-word-limit></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="tit"></div>
                            <div class="line line-none">
                                <span class="circle o"></span>
                            </div>
                            <div class="cont">
                                愉快滴结束旅程
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </template>
    <template v-if="active == '3'">
        <div class="panel">
            <div class="hd">费用包含</div>
            <div class="bd">
                <el-input type="textarea" style="width: 600px;" rows="10" placeholder="请输入内容" v-model="form.feeInclude"></el-input>
            </div>
        </div>
        <div class="panel">
            <div class="hd">费用不包含</div>
            <div class="bd">
                <el-input type="textarea" style="width: 600px;" rows="10" placeholder="请输入内容" v-model="form.feeExclude"></el-input>
            </div>
        </div>
    </template>
    <template v-if="active == '4'">
        <div class="panel">
            <div class="hd">注意事项</div>
            <div class="bd">
                <el-input type="textarea" style="width: 600px;" rows="10" placeholder="请输入内容" v-model="form.attention"></el-input>
            </div>
        </div>
    </template>
</div>
</template>

<script>
import Cookies from 'js-cookie'
import TinymceEditor from '@/components/editor/editor'

const stype = {
  traffic: {
    popover: false,
    name: '交通',
    category: 'traffic',
    form: {
      direction: 'go',
      type: '',
      destination: '',
      hour: 0,
      minute: 0,
      intro: ''
    }
  },
  play: {
    popover: false,
    name: '游玩',
    category: 'play',
    form: {
      name: '',
      pics: [],
      hour: 0,
      minute: 0,
      intro: ''
    }
  },
  catering: {
    popover: false,
    name: '餐饮',
    category: 'catering',
    form: {
      type: '',
      isSelfCare: 1,
      address: '',
      benchmark: 0,
      hour: 0,
      minute: 0,
      intro: ''
    }
  },
  shoping: {
    popover: false,
    name: '购物',
    category: 'shoping',
    form: {
      address: '',
      goods: '',
      isShowTip: 1,
      hour: 0,
      minute: 0,
      intro: ''
    }
  },
  hotel: {
    popover: false,
    name: '酒店',
    category: 'hotel',
    form: {
      address: '',
      pics: [],
      starLevel: '',
      name: '',
      intro: ''
    }
  },
  gather: {
    name: '集合',
    category: 'gather',
    form: {
      address: [''],
      intro: ''
    }
  },
  back: {
    name: '返程',
    category: 'back',
    form: {
      address: '',
      type: '',
      typeText: '',
      backType: 'locally',
      hour: 0,
      minute: 0,
      intro: ''
    }
  }
}
export default {
  props: ['prodId', 'data'],
  data () {
    return {
      msg: '',
      loading: false,
      uploadApi: `${window.SITE_CONFIG.apiURL}/sys/oss/upload`,
      uploadHeaders: {
        token: Cookies.get('token') || ''
      },
      active: '1',
      route: {
        name: '',
        days: 1
      },
      box: {},
      schedule: [

      ],
      form: {
        description: '',
        feeInclude: '',
        feeExclude: '',
        attention: '',
        starLevelText: ''
      },
      init: {
        language_url: '/tinymce/langs/zh_CN.js', // 语言包的路径
        language: 'zh_CN', // 语言
        skin_url: '/static/tinymce/skins/lightgray', // skin路径
        height: 300, // 编辑器高度
        branding: false, // 是否禁用“Powered by TinyMCE”
        menubar: false, // 顶部菜单栏显示,
        toolbar: ' undo redo | fontsizeselect bold italic underline strikethrough ',
        plugins: 'paste  link  image'
      }
    }
  },
  components: {
    TinymceEditor
  },
  created () {
    this.initData()
    tinymce.init({
      selector: '#tinymce'
    })
  },
  mounted () {

    // document.addEventListener('click', this.clickFn)
  },
  destroyed () {
    // document.removeEventListener('click', this.clickFn)
  },
  methods: {
    initData () {
      const {
        feeInclude,
        feeExclude,
        description,
        attention
      } = this.data.subsidiary || {}
      const {
        name,
        days
      } = this.data.customizationSchedule || {}
      this.form = {
        feeInclude,
        feeExclude,
        description,
        attention
      }
      this.route = {
        name,
        days
      }
      const schedule = []
      this.data.scheduleActivityList.map((item, idx) => {
        schedule[idx] = {
          list: [],
          back: [],
          gather: []
        }
        item.map((i, index) => {
          let {
            category,
            address = '',
            intro,
            gather,
            name,
            popover,
            type,
            backType,
            minute,
            goods,
            isShowTip,
            benchmark,
            hour,
            starLevel,
            scheduleActivityPictureList,
            isSelfCare,
            direction
          } = i
          let typeText = ''
          let starLevelText = ''
          if (type && !['巴士', '火车', '飞机'].includes(type)) {
            typeText = type
            type = '自定义'
          }
          if (starLevel && !['一星级', '二星级', '三星级', '四星级', '五星级'].includes(starLevel)) {
            starLevelText = starLevel
            starLevel = '自定义'
          }
          switch (category) {
            case 'back':
              schedule[idx].back.push({
                category,
                gather,
                name,
                form: {
                  name,
                  benchmark,
                  isShowTip,
                  goods,
                  intro,
                  typeText,
                  starLevelText,
                  minute,
                  hour,
                  starLevel,
                  address: address ? address.split(',') : [],
                  pics: scheduleActivityPictureList,
                  type,
                  backType,
                  isSelfCare
                }
              })
              break
            case 'gather':
              schedule[idx].gather.push({
                category,
                popover,
                name,
                form: {
                  name,
                  benchmark,
                  isShowTip,
                  goods,
                  typeText,
                  starLevelText,
                  intro,
                  minute,
                  hour,
                  starLevel,
                  address: address ? address.split(',') : [],
                  pics: scheduleActivityPictureList,
                  type,
                  backType,
                  isSelfCare
                }
              })

              break
            default:
              schedule[idx].list.push({
                category,
                popover,
                name,
                form: {
                  name,
                  benchmark,
                  isShowTip,
                  goods,
                  typeText,
                  starLevelText,
                  intro,
                  minute,
                  hour,
                  starLevel,
                  address: address ? address.split(',') : [],
                  pics: scheduleActivityPictureList,
                  type,
                  backType,
                  isSelfCare,
                  direction
                }
              })
              break
          }
        })
      })
      // this.schedule = schedule;
      // console.log(" this.schedule", schedule);
      if (schedule.length) {
        this.schedule = schedule
        this.setDays(days)
      }
    },
    // 控制上传文件的大小
    beforeAvatarUpload (file) {
      const permitFileType = ['image/jpeg', 'image/png', 'image/jpg']
      const isJPG = permitFileType.indexOf(file.type) !== -1
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是jpeg，png或jpg格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    uploadPicSuccess (dayIdx, idx) {
      return (res, file, filelist) => {
        this.schedule[dayIdx].list[idx].form.pics.push({
          url: res.data.src
        })
      }
    },
    getDayText (idx) {
      const changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      const unit = ['', '十', '百', '千', '万']
      const num = parseInt(idx)
      const getWan = (temp) => {
        const strArr = temp.toString().split('').reverse()
        let newNum = ''
        for (var i = 0; i < strArr.length; i++) {
          newNum = (i == 0 && strArr[i] == 0 ? '' : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? '' : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum
        }
        return newNum
      }
      const overWan = Math.floor(num / 10000)
      let noWan = num % 10000
      if (noWan.toString().length < 4) {
        noWan = '0' + noWan
      }
      return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num)
    },
    setNav (idx) {
      this.active = idx
    },
    addSchedule (dayIdx, type, idx) {
      const item = JSON.parse(JSON.stringify(stype[type]))
      console.log('item', item)
      let t = 'list'
      if (type == 'gather') {
        t = 'gather'
      } else if (type == 'back') {
        t = 'back'
      }
      this.schedule[dayIdx][t].splice(idx + 1, 0, item)
    },
    delSchedule (dayIdx, type, idx) {
      let t = 'list'
      if (type == 'gather') {
        t = 'gather'
      } else if (type == 'back') {
        t = 'back'
      }
      this.schedule[dayIdx][t].splice(idx, 1)
    },
    setDays (v) {
      const n = this.schedule.length
      if (n > v) {
        this.schedule.splice(v)
      } else {
        const item = {
          gather: [],
          list: [],
          back: []
        }
        for (let i = 0; i < v - n; i++) {
          this.schedule.push(JSON.parse(JSON.stringify(item)))
        }
      }
      console.log(v)
    },
    submitInfo () {
      const sd = this.form
      sd.customizationId = this.prodId
      this.loading = true
      this.$http.put('/customization/description', sd).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.$parent.getInfo()
        this.loading = false
        // 跳转到行程
        const activeNum = Number(this.active)

        if (activeNum != 4) {
          this.active = activeNum + 1 + ''
        } else {
          const nextId = 3
          this.$emit('changeSubMenu', nextId)
        }
      })
    },
    submitRoute () {
      const sd = JSON.parse(JSON.stringify(this.route))
      // console.log("============sd", sd);
      sd.customizationId = this.prodId
      const list = []
      for (const i in this.schedule) {
        const d = this.schedule[i]
        for (const n in d.gather) {
          const item = JSON.parse(JSON.stringify(d.gather[n].form))
          if (item.address.length === 0 || item.address[0] === '') {
            this.$message({
              message: '请输入集合地址',
              type: 'warning'
            })
            return
          }
          if (item.intro === '') {
            this.$message({
              message: '请输入集合详细说明',
              type: 'warning'
            })
            return
          }
          item.day = i * 1 + 1
          item.category = 'gather'
          item.name = '集合'
          item.address = item.address instanceof Array ? item.address.join(',') : item.address
          item.customizationId = sd.customizationId
          if (item.type === '自定义') {
            item.type = item.typeText
          }
          if (item.starLevel === '自定义') {
            item.starLevel = item.starLevelText
          }
          list.push(item)
        }

        for (const n in d.list) {
          const it = d.list[n]
          const item = JSON.parse(JSON.stringify(it.form))
          item.day = i * 1 + 1
          item.category = it.category
          const nameClass = item.category === 'traffic' ? '交通' : item.category === 'play' ? '游玩' : item.category === 'catering' ? '餐饮' : item.category === 'shoping' ? '购物' : '酒店'
          if ((item.hour == 0 || item.hour == '') && (item.minute == 0 || item.minute == '')) {
            this.$message({
              message: `${nameClass}请输入正确时间`,
              type: 'warning'
            })
            return
          }
          if (item.minute > 59) {
            this.$message({
              message: `${nameClass}分钟数不得超过59`,
              type: 'warning'
            })
            return
          }
          if (item.intro === '') {
            this.$message({
              message: `${nameClass}请输入详细说明`,
              type: 'warning'
            })
            return
          }
          if (item.pics && item.pics.length) {
            item.scheduleActivityPictureList = item.pics
            delete item.pics
          }
          if (item.category == 'catering') {
            if (item.hour > 24) {
              this.$message({
                message: '餐饮时间不得超过24小时',
                type: 'warning'
              })
              return
            }
          }
          if (item.type === '自定义') {
            item.type = item.typeText
          }
          if (item.starLevel === '自定义') {
            item.starLevel = item.starLevelText
          }
          item.customizationId = sd.customizationId
          item.address = item.address instanceof Array ? item.address.join(',') : item.address
          list.push(item)
        }
        for (const n in d.back) {
          const item = JSON.parse(JSON.stringify(d.back[n].form))
          if (item.intro === '') {
            this.$message({
              message: '返程请输入详细说明',
              type: 'warning'
            })
            return
          }
          item.day = i * 1 + 1
          item.category = 'back'
          item.name = '返程'
          item.address = item.address instanceof Array ? item.address.join(',') : item.address
          item.customizationId = sd.customizationId
          if (item.type === '自定义') {
            item.type = item.typeText
          }
          if (item.starLevel === '自定义') {
            item.starLevel = item.starLevelText
          }
          list.push(item)
        }
      }
      if (list.length === 0) {
        this.$message({
          message: '请设置集合点',
          type: 'warning'
        })
        return
      }
      sd.scheduleActivityList = list
      console.log(sd)
      // return
      this.loading = true
      this.$http.put('/customization/schedule', sd).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.$parent.getInfo()
        this.loading = false
        const activeNum = Number(this.active)
        this.active = activeNum + 1 + ''
      })
    },
    submit () {
      if (this.active == '2') {
        this.submitRoute()
      } else {
        this.submitInfo()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.popover-stype {
    .item {
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        padding-left: 10px;

        &:hover {
            color: #3753C6;
        }
    }
}

.step {
    .row {
        display: flex;

        .tit {
            width: 90px;
            min-height: 100px;
            color: #666;
            padding-right: 10px;
            text-align: right;
        }

        .line {
            width: 15px;
            border-left: 1px solid #AAAAAA;
            position: relative;
            top: 4px;
            min-height: 50px;

            &.line-none {
                border-left: 0;
            }

            .circle {
                position: absolute;
                left: -7px;
                display: block;
                height: 14px;
                width: 14px;
                border-radius: 50%;
                border: 1px solid #AAAAAA;
                background: #fff;
            }

            .o {
                top: 0px;
            }

            .btn {
                background: #3753C6;
                color: #fff;
                bottom: 20px;
                text-align: center;
                line-height: 10px;
                font-size: 14px;
                cursor: pointer;
            }
        }

        .cont {
            flex: 1;
            padding-left: 10px;
            padding-bottom: 60px;

            .fm-box {
                background: #FAFAFA;
                padding-bottom: 20px;
                border-radius: 2px;

                .title {
                    display: flex;
                    padding: 0 20px;
                    height: 48px;
                    line-height: 48px;

                    .t {
                        flex: 1;
                        font-weight: bold;
                        font-size: 14px;
                    }

                    .btn {
                        width: 120px;
                        text-align: right;
                    }
                }

                .form {
                    .add-btn {
                        padding-left: 120px;
                    }
                }
            }
        }
    }
}

.upload {
    display: flex;
    width: 480px;

    .ipt {
        flex: 1;
    }

    .btn {
        width: 100px;
    }
}

.preview {
    display: flex;
    padding-top: 20px;

    .item {
        position: relative;
        margin-right: 10px;
        width: 120px;

        i.el-icon-close {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #666666;
            color: #fff;
            line-height: 14px;
            text-align: center;
            right: -7px;
            top: -7px;
        }

        .v {
            text-align: center;
            cursor: pointer;
            height: 120px;
            line-height: 156px;
            background: #f7f7f7;

            i {
                font-size: 64px;
                color: #666;
            }
        }

        img {
            width: 100%;
        }
    }
}
</style>
